<!DOCTYPE html>
<html lang="en">

    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>盒子</title>

        <style type="text/css">
            .wrapper { 
                width: 400px ; 
                height: 300px ; 
                border: 20px double yellow ; 
                margin: 25px  auto ; 
                background-image: url( "code.webp" ) ;
                background-clip: content-box ;
                padding: 25px ;
            }
            /* box-sizing 属性允许您以特定的方式定义匹配某个区域的特定元素 */
            .first { box-sizing: content-box ; /* 宽度和高度分别应用到元素的内容框( 在宽度和高度之外绘制元素的内边距和边框 ) */ }
            /* 即使是设置了 box-sizing 为 border-box ，那么指定的元素的宽度和高度也不包括 元素的外边距 */
            .third { box-sizing: border-box ; /* 为元素设定的宽度和高度决定了元素的边框盒 ( 为元素设定的宽度和高度包括内容、内边距、边框 )*/ }
        </style>
    </head>

    <body>

        <div class="wrapper first"></div>

        <div class="wrapper second"></div>

        <div class="wrapper third"></div>

    </body>

</html>